web网站开发流程图/潍坊网站建设解决方案

百度地图申请地址：控制台 | 百度地图开放平台

效果：

1.后台

1.1申请百度地图APi

1.2 引入百度地图

 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=自己百度生气apikey"></script>

1.3 v2组件

<template><div><!-- 地图容器 --><div id="map-container" class="map-container"></div><!-- 结果展示区域 --><div class="result">搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input><el-button type="primary" size="small" @click="searchAddress">搜索</el-button></div></div>
</template><script>
export default {data() {return {keyMap: '',map: null,marker: null,geoc: null};},methods: {updatePositionAndAddress(point) {this.$emit('update:marker-position', {lat: point.lat,lng: point.lng});this.geoc.getLocation(point, (rs) => {if (rs) {this.$emit('update:address', rs.address);}});},handleMapClick(e) {if (this.marker) {this.map.removeOverlay(this.marker);}this.marker = new BMap.Marker(e.point);this.map.addOverlay(this.marker);this.updatePositionAndAddress(e.point);},searchAddress() {if (!this.keyMap) return;const local = new BMap.LocalSearch(this.map, {renderOptions: { map: this.map },onSearchComplete: (results) => {if (results.getNumPois()) {const firstResult = results.getPoi(0);const point = firstResult.point;if (this.marker) {this.map.removeOverlay(this.marker);}this.marker = new BMap.Marker(point);this.map.addOverlay(this.marker);this.map.centerAndZoom(point, 15);this.updatePositionAndAddress(point);}}});local.search(this.keyMap);}},mounted() {if (!window.BMap) {console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接');return;}this.map = new BMap.Map('map-container');this.map.centerAndZoom(new BMap.Point(102.755, 25.134), 13);this.map.enableScrollWheelZoom();this.geoc = new BMap.Geocoder();this.map.addEventListener('click', this.handleMapClick);}
};
</script><style scoped>
.map-container {width: 600px;height: 500px;
}.result {margin-top: 10px;font-size: 14px;
}
</style>

1.4 v3组件

<template><div><!-- 地图容器 --><div id="map-container" class="map-container"></div><!-- 结果展示区域 --><div class="result">搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input><el-button type="primary" size="small" @click="searchAddress">搜索</el-button></div></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue'const emit = defineEmits(['update:marker-position', 'update:address'])// 定义响应式数据
const keyMap = ref('')
let map: any = null
let marker: any = null
let geoc: any = null// 更新标记位置和地址的函数
const updatePositionAndAddress = (point: any) => {// 发送位置更新事件emit('update:marker-position', {lat: point.lat,lng: point.lng})// 反向地理编码获取详细地址geoc.getLocation(point, (rs: any) => {if (rs) {emit('update:address', rs.address)}})
}// 处理地图点击事件
const handleMapClick = (e: any) => {// 如果已有标注，则先移除if (marker) {map.removeOverlay(marker)}// 创建新的标注marker = new BMap.Marker(e.point)map.addOverlay(marker)// 更新位置和地址updatePositionAndAddress(e.point)
}// 搜索地址
const searchAddress = () => {if (!keyMap.value) return// 创建地址搜索实例const local = new BMap.LocalSearch(map, {renderOptions: { map: map },onSearchComplete: (results: any) => {if (results.getNumPois()) {const firstResult = results.getPoi(0)const point = firstResult.point// 移除旧标记if (marker) {map.removeOverlay(marker)}// 添加新标记marker = new BMap.Marker(point)map.addOverlay(marker)map.centerAndZoom(point, 15)// 更新位置和地址updatePositionAndAddress(point)}}})local.search(keyMap.value)
}// 初始化地图
onMounted(() => {const BMap = window.BMapif (!BMap) {console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接')return}// 初始化地图map = new BMap.Map('map-container')map.centerAndZoom(new BMap.Point(102.755, 25.134), 13)map.enableScrollWheelZoom()// 初始化地理编码器geoc = new BMap.Geocoder()// 添加点击事件监听map.addEventListener('click', handleMapClick)
})
</script><style scoped>
/* 样式部分 */
.map-container {width:600px;height: 500px;
}.result {margin-top: 10px;font-size: 14px;
}
</style>

1.5 使用 

#需要完成源码加vx a2411286970a<BaiduMap ref="mapRef" @update:marker-position="handleMarkerPositionUpdate"@update:address="handleAddressUpdate"></BaiduMap>

#需要完成源码加vx a2411286970a    
handleMarkerPositionUpdate(position){console.log(position);this.ruleForm.latitude=position.latthis.ruleForm.longitude=position.lng},

2.uinapp

我们在后台进行位置获取后，在前台微信小程序及可进回显导航即可！

			// 导航功能onNavigateTap() {// 检查是否有地址信息if (!this.detail.jingdiandizhi) {this.$utils.msg('暂无地址信息');return;}let _this = this;uni.authorize({scope: 'scope.userLocation',success: () => {// 用户已授权，获取当前位置uni.getLocation({type: 'gcj02', // 返回可以用于uni.openLocation的经纬度success: (res) => {const latitude = res.latitude;const longitude = res.longitude;// 使用当前位置打开地图uni.openLocation({latitude: parseFloat(this.detail.latitude),longitude:parseFloat(this.detail.longitude),name: this.detail.jingdianmingcheng,address: this.detail.jingdiandizhi,scale: 18,success: function() {console.log('成功打开位置');},fail: function(err) {console.error('打开位置失败', err);}});},fail: function(err) {console.error('获取位置失败', err);}});},fail: () => {// 用户未授权uni.showModal({title: '提示',content: '需要获取您的位置权限，请前往设置开启。',success: (res) => {if (res.confirm) {uni.openSetting();}}});}});// // 打开地图导航// uni.openLocation({// 	latitude: 0, // 这里需要替换为实际的经纬度// 	longitude: 0, // 这里需要替换为实际的经纬度// 	name: this.detail.jingdianmingcheng,// 	address: this.detail.jingdiandizhi,// 	success: function() {// 		console.log('导航成功');// 	},// 	fail: function(err) {// 		console.log('导航失败', err);// 		// 如果没有经纬度，可以使用复制地址的方式// 		uni.setClipboardData({// 			data: this.detail.jingdiandizhi,// 			success: function() {// 				uni.showToast({// 					title: '地址已复制，请打开地图APP进行导航',// 					icon: 'none'// 				});// 			}// 		});// 	}// });},